.virtualTable.table-wrapper {
    position: relative;
    --row-height: 40px;
    width: 100%;
    height: 100%;
    background-color: var(--el-bg-color-overlay);
    border-radius: var(--el-border-radius-base);
    white-space: nowrap;

    .header-wrapper {
        border-bottom: 1px solid var(--el-border-color-lighter);
        overflow: hidden;
        /* 防止水平滚动条出现在header */
        font-size: 13px;
        font-weight: bold;
        color: var(--el-text-color-primary);

        .header {
            height: calc(var(--row-height) - 1px);
            line-height: calc(var(--row-height) - 1px);
        }
    }

    .body-wrapper {
        width: 100%;
        overflow: auto;
        height: calc(100% - var(--row-height));
        position: relative;
        font-size: 12px;

        .virtual-list-phantom {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: -1;
        }

        .virtual-list {
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            // transform: translateZ(0);
            // will-change: transform;
            /* 启用 GPU 加速 */
        }

        .table-row {
            border-bottom: 1px solid var(--el-border-color-lighter);
            height: var(--row-height);

            .row {
                color: var(--el-text-color-regular);
                height: calc(var(--row-height) - 1px);
                line-height: calc(var(--row-height) - 1px);
            }

            .row:hover {
                background-color: var(--el-fill-color);

                .fixed-left {
                    background-color: var(--el-fill-color);
                }

                .fixed-right {
                    background-color: var(--el-fill-color);
                }
            }

            .selected-row {
                background: var(--el-color-primary-light-9);

                .fixed-left {
                    background-color: var(--el-color-primary-light-9);
                }

                .fixed-right {
                    background-color: var(--el-color-primary-light-9);
                }
            }

        }
    }

    .footer-wrapper {
        background-color: var(--el-fill-color-light);
        border-top: 1px solid var(--el-border-color-lighter);
        border-width: 1px 0;
        color: var(--el-text-color-primary);
        font-size: 13px;
        font-weight: bold;
    }

    .cell {        
        display: inline-block;
        padding-left: 10px;
        height: calc(var(--row-height) - 1px);
        vertical-align: middle;
        /* 垂直居中 */
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: break-word;        
    }

    .first-coloumn {
        padding-left: 25px;
    }

    .fixed-left,
    .fixed-right {
        position: sticky;
        background: var(--el-bg-color-overlay);
        z-index: 2;
    }

    .fixed-box-left {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        pointer-events: none;
        /* 忽略鼠标事件 */
        box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.12);
        -webkit-box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.12);
        /* Safari/Chrome */
        -moz-box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.12);
        /* Firefox */
        transition: opacity 0.2s;
    }

    .fixed-box-right {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 3;
        pointer-events: none;
        /* 忽略鼠标事件 */
        box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.12);
        -webkit-box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.12);
        /* Safari/Chrome */
        -moz-box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.12);
        /* Firefox */
        transition: opacity 0.2s;
    }

    .group-title {
        height: calc(var(--row-height) - 1px);
        line-height: calc(var(--row-height) - 1px);
        color: var(--el-text-color-primary);
        font-weight: bold;
        font-size: 13px;

        /* background: rgb(245, 245, 245); */
        .checkbox {
            background-color: transparent;
        }

        .group-title-name {
            display: inline-block;
            padding-left: 10px;
            z-index: 3;
            position: sticky;
            left: 30px;
            vertical-align: middle;
        }
    }

    .checkbox {
        display: inline-block;
        position: sticky;
        left: 0;
        width: 30px;
        padding-left: 5px;
    }
}

.virtualTable.table-wrapper.hasFootTable {
    .body-wrapper {
        height: calc(100% - 2 * var(--row-height));
    }

    .footer-wrapper {
        .table-row {
            height: calc(var(--row-height) - 1px);
            line-height: calc(var(--row-height) - 1px);
        }

        .fixed-left,
        .fixed-right {
            background-color: var(--el-fill-color-light);
        }
    }
}

.tool-tips {
    position: absolute;    
    // vertical-align: middle;
    background: var(--el-text-color-primary);
    color: var(--el-bg-color);
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: normal;       /* 允许自然换行[6](@ref) */
    word-wrap: break-word;     /* 长单词或URL强制换行[2,5](@ref) */
    overflow-wrap: break-word; /* 兼容性更好的换行方式[2](@ref) */
    height: auto;              /* 取消固定高度 */
    line-height: 1.5;          /* 多行文本行高优化 */
    z-index: 1000;    
    // transform: translateY(-50px);
    pointer-events: auto; // 启用交互
    /* 新增箭头定位 */    
    .tooltip-arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid var(--el-text-color-primary);
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
    }
}